<template>
  <div class="app-container">
    <el-row :gutter="20">
      <el-col>
        <!-- 退房列表 -->
        <el-table v-loading="loading" :data="tableData" ref="tableRef" border style="width: 100%" class="mb20">
          <el-table-column prop="capsuleRoomName" label="房间" align="center" width="140">
          </el-table-column>
          <el-table-column prop="capsuleRoomId" label="退房ID" align="center" width="80">
          </el-table-column>
          <el-table-column prop="webUserName" label="用户" align="center" width="100">
          </el-table-column>
          <el-table-column prop="webUserId" label="用户ID" align="center" width="90">
          </el-table-column>
          <el-table-column prop="checkOutDesc" label="退房原因" align="center">
          </el-table-column>
          <el-table-column prop="checkOutTime" label="申请时间" align="center" width="210">
          </el-table-column>
          <el-table-column prop="approveStatus" label="审批状态" align="center" width="120">
            <template slot-scope="scope">
              <div class="roomStatus" @click="scope.row.approveStatus == 0 ? fromCheckOut(scope.row.id) :  ''"
                :style="{color:scope.row.approveStatus == 0 ? '#f56c6c' : (scope.row.approveStatus == 1 ? '#5ac725' : (scope.row.approveStatus == '2' ? '#f9ae3d' : '#909399'))}">
                {{scope.row.approveStatus == 0 ? '审批中' : (scope.row.approveStatus == 1 ? '已通过' : (scope.row.approveStatus == '2' ? '已拒绝' : '未知'))}}
              </div>
            </template>
          </el-table-column>
          <el-table-column prop="checkOutTime" label="退款" align="center" width="110">
            <template slot-scope="scope">
              <el-button type="danger" size="mini" plain :disabled="scope.row.subFlag == 0 ? false : true"
                @click.stop="onRefund(scope.row.payOrderId , scope.row.payRealPrice)">去退款</el-button>
            </template>
          </el-table-column>
        </el-table>
        <el-pagination background align='right' @size-change="handleSizeChange" @current-change="handleCurrentChange"
          :current-page="queryParams.pageNum" :page-size="queryParams.pageSize" layout="prev, pager, next"
          :total="total">
        </el-pagination>
      </el-col>
    </el-row>
    <!-- 退款 -->
    <el-dialog title="退款" :visible.sync="refundVisibles" width="44%" :before-close="refundClose">
      <el-form ref="refundForm" :model="refundForm" label-width="120px" :rules="refund_rules">
        <el-row>
          <el-col :span="22">
            <el-form-item label="退款金额" prop="refundPrice">
              <span style="color: #e45656;">当前可退金额：￥{{price}} 元</span>
              <el-input type="number" v-model="refundForm.refundPrice" placeholder="输入退款金额" />
            </el-form-item>
          </el-col>
          <el-col :span="22">
            <el-form-item label="退款理由" prop="refundReason">
              <el-input type="textarea" v-model="refundForm.refundReason" placeholder="输入退款理由" />
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <span slot="footer">
        <el-button @click="refundVisibles = false">取 消</el-button>
        <el-button type="primary" @click="onRefundForm('refundForm')">确 定</el-button>
      </span>
    </el-dialog>
    <!-- 退房审批 -->
    <el-dialog title="提示" :visible.sync="dialogVisible" width="30%" :before-close="handleClose">
      <el-form ref="checkOut" :model="checkOut" label-width="120px" :rules="rules">
        <el-form-item label="请选审批状态" prop="approveStatus">
          <el-select v-model="checkOut.approveStatus" placeholder="请选审批状态">
            <el-option v-for="item in checkOutTypeList" :label="item.label" :value="item.value"></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="btn('checkOut')">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
  import {
    getRecordList,
    approveCheckOut,
    onRefundOrder
  } from "@/api/order/order"
  export default {
    data() {
      return {
        loading: true,
        total: 0,
        queryParams: {
          pageNum: 1,
          pageSize: 10
        },
        fromData: {
          createBeginTime: "",
          createEndTime: "",
          pageNum: 1,
          pageSize: 10
        },
        tableData: [],
        dialogVisible: false,
        checkOut: {
          approveStatus: '',
          id: ''
        },
        checkOutTypeList: [{
            value: 1,
            label: '通过'
          },
          {
            value: 2,
            label: '拒绝'
          }
        ],
        rules: {
          approveStatus: [{
            required: true,
            message: '请选择审批状态',
            trigger: 'blur'
          }]
        },
        id: '',
        refundVisibles: false,
        refundForm: {},
        price:0,
        refund_rules: {
          refundPrice: [{
            required: true,
            message: '请输入退款金额',
            trigger: 'blur'
          }],
          refundReason: [{
            required: true,
            message: '请输入退款理由',
            trigger: 'blur'
          }]
        }
      }
    },
    created() {
      this.getRecordList()
    },
    methods: {
      getRecordList() {
        this.fromData.pageNum = this.queryParams.pageNum
        this.fromData.pageSize = this.queryParams.pageSize
        getRecordList(this.fromData).then(res => {
          this.tableData = res.data.rows
          this.total = res.data.total
          this.loading = false
        })
      },
      handleClose() {
        this.dialogVisible = false
      },
      handleSizeChange(val) {
        this.queryParams.pageNum = val
        this.getRecordList()
      },
      handleCurrentChange(val) {
        this.queryParams.pageNum = val
        this.getRecordList()
      },
      fromCheckOut(id) {
        this.checkOut = {
          approveStatus: '',
          id: ''
        }
        this.id = id
        this.dialogVisible = true
      },
      btn(checkOut) {
        this.$refs[checkOut].validate((valid) => {
          if (valid) {
            this.checkOut.id = this.id
            approveCheckOut(this.checkOut).then(res => {
              this.$message({
                type: 'success',
                message: '提交成功!'
              })
              this.dialogVisible = false
              this.getRecordList()
            })
          }
        })
      },
      onRefund(orderId, price){
        this.price = price
        this.refundForm.payOrderId = orderId
        this.refundVisibles = true
      },
      onRefundForm(refundForm) {
        this.$refs[refundForm].validate((valid) => {
          if (valid) {
            if (Number(this.refundForm.refundPrice) > Number(this.price)) return this.$message({
              type: 'error',
              message: '退款金额不得大于支付金额！'
            })
            if (this.refundForm.refundPrice == 0 || this.refundForm.refundPrice < 0) return this.$message({
              type: 'warning',
              message: '退款金额需大于0'
            })
            this.$confirm('您是否确定退款吗?', '提示', {
              confirmButtonText: '确 定',
              cancelButtonText: '取 消',
              type: 'warning'
            }).then(() => {
              this.refundVisibles = false
              this.onRefundOrder()
              this.refundForm = {}
            }).catch(() => {
              this.$message({
                type: 'info',
                message: '已取消'
              })
            })
          }
        })
      },
      onRefundOrder(){
        console.log(this.refundForm)
        // return
        onRefundOrder(this.refundForm).then(res => {
          if (res.code == 200) {
            this.$message({
              type: 'success',
              message: '已提交退款申请'
            })
            this.refundVisibles = false
            this.getRecordList()
          }
        })
      },
      refundClose(){
        this.refundVisibles = false
      }
    }
  }
</script>

<style lang="scss">
  .roomStatus {
    // color: #fff;
    border-radius: 2px;
    font-size: 12px;
    padding: 4px 0;
    cursor: pointer;
  }
</style>
